<template>
	<view class="">
		<!-- 弹出层 -->
		<u-popup v-model="popupShow" mode="bottom" border-radius="14" length="80%">

			<scroll-view scroll-y="true" @scrolltolower="popupLower" class=""
				style="padding: 10px;display: flex;flex-direction: column;height: 100%;">
				<!-- 顶部 -->
				<view style="display: flex;justify-content: space-between;align-items: center;">
					<span style="font-size: 33rpx;font-weight: 1000;">
						{{popupTitle}}
					</span>
					<u-icon @click="popupShow = false" name="close" size="28"
						style="background-color: #ededed; border-radius: 50%; padding: 4px;"></u-icon>
				</view>
				<view class="" style="flex: 1;">
					<!-- 中间的图片 ,没有评论才显示-->
					<view class="" style="position: relative;top: 40%;" v-if="commentList.length===0">
						<view class="" style="display: flex;justify-content: center;">
							<image style="width: 140px;height: 140px;" src="@/static/ui/pinglun.png" mode="">
							</image>
						</view>
						<view class=""
							style="color: #ccc;font-size: 30rpx;font-weight: 550;display: flex;margin-top: 10px;justify-content: center;">
							发起第一条讨论
						</view>
					</view>
					<!-- 有评论的内容 -->
					<view v-else class="" v-for="(commentItem,commentIndex) in commentList" :key="commentItem.id"
						style="margin-top: 10px;width: 70%;display: flex;background-color: #f3f3f3;padding: 10px;border-radius: 10px;">
						<view class="" style="width: 100%;">
							<view class="">
								<!-- 用户信息 -->
								<view class=""
									style="justify-content: space-between;display: flex;align-items: center;">
									<view class="" style="display: flex;align-items: center;">
										<u-avatar :src="commentItem.photoUrl"></u-avatar>
										<span
											style="margin-left: 5px;display: block;align-items: center;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;max-width: 50%;">{{commentItem.nickName}}</span>

										<!-- 如果是用户自己发布才会显示 -->
										<view class="" v-if="publishCommentList.includes(commentItem.id)"
											style="padding: 2px;color: #9a9696;background-color: #dad7d7;margin-left: 4px;">
											我
										</view>
									</view>

									<!-- 点赞·图标 -->
									<view class="" @click="likeClick(commentItem)"
										style="display: flex;align-items: center;">
										<image style="width: 20px; height: 20px;"
											:src="likeClickFlagList.includes(commentItem.id) ? '../../../static/ui/activedianzan.png' : '../../../static/ui/dianzan.png'"
											mode="">
										</image>

										<view class="" v-if="likeClickFlagList.includes(commentItem.id)"
											style="margin-left: 3px;font-family: system-ui;">
											{{commentItem.likeCount}}
										</view>
									</view>
								</view>

								<!-- 内容 -->
								<view class="" style="font-size: 37rpx;margin: 5px 0;">
									{{commentItem.content}}
								</view>
								<!-- 时间地点 -->
								<view class="" style="color: #ccc;">
									{{timeAgo(commentItem.createTime)}} {{commentItem.ipAddr}}
								</view>
							</view>
						</view>

					</view>

				</view>

				<!-- 底部键盘 -->
				<view class="popup-input" style="position: fixed;" :style="{ bottom: commentInputHeight +'px' }">
					<view v-if="!keyBorderShow" class=""
						style="background-color: #f9f9f9;margin: 0 8px;border-radius: 36px;display: flex;align-items: center;">
						<view class=""
							style="margin-left: 10px;display: flex;justify-content: center;align-items: center;">
							<image style="width: 30px;height: 30px;border-radius: 20px;" :src="userpic" mode="">
							</image>
						</view>

						<u-input style="flex:1;" @click="clickCommentInput" class="" v-model="popupInputValue"
							placeholder="我来说两句 ~" :clearable="false" placeholder-style="color:#ccc;padding-left:10px;"
							:adjust-position="false" />

					</view>
					<view v-else class="">
						<view class="" style="background-color: #fff;">
							<!-- 上表情 -->
							<view class="emoji" style="display: flex; align-items: center; font-size: 50rpx;">
								<span v-for="(emoji, index) in emojis" :key="index" @click="setPopupInputValue(emoji)"
									style="margin-left:5px; flex: 1; display: flex; justify-content: center;">{{ emoji }}</span>
							</view>
							<!-- 下输入 -->
							<view class=""
								style="background-color: #e1dfdfa1;border-radius: 20px;margin: 10px;display: flex;align-items: center;">
								<!-- 输入框 -->
								<view class="" style="position: relative;width: 100%;flex: 4;padding: 0 10px;">
									<u-input :focus="true" style="flex:1;" @click="clickCommentInput" class=""
										v-model="popupInputValue" placeholder="我来说两句 ~" :clearable="false"
										placeholder-style="color:#ccc;padding-left:10px;" :adjust-position="false" />
									<view class="" style="position: absolute;top: 4px;right: 19px;">
										<image style="width: 25px;height: 25px;z-index: 99;"
											src="@/static/ui/startpic.png" mode=""></image>
										<image style="width: 25px;height: 25px;margin-left: 10px;z-index: 99;"
											src="@/static/ui/closeKeyBorder.png" mode="" @click="hideKeyBoder">
										</image>
									</view>
								</view>

								<!-- 发送按钮 -->
								<view class="" style="flex: 1;" v-show="popupInputValue" @click="publishComment">
									<view class=""
										style="justify-content: center;display: flex;border-radius: 20px;background-color: #ffeb3b;color: black;font-size: 30rpx;font-weight: 1000;padding: 5px;margin-left: 5px;">
										发送
									</view>
								</view>
							</view>


						</view>
					</view>
				</view>

			</scroll-view>

		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//弹出层
				popupShow: false, //讨论是否显示
				popupTitle: '', //弹出层标题
				popupInputValue: '',
				likeClickFlagList: [], //已经点赞过的评论
				keyBorderShow: false,
				commentInputHeight: 2,
				skuId: '',
				emojis: ["😘", "🦌", "🙌", "🌹", "🤣", "🤞"],
				publishCommentList: [], //用户发布的评论id

				//对于评论的分页
				commentPage: 1,
				commentPages: 1,
				commentList: [],

				//用户信息
				userpic: ''
			}
		},
		mounted() {

			//检测缓存，查询出已经点赞的评论
			uni.getStorage({
				key: 'market_comment_like',
				success: (res) => {
					this.likeClickFlagList = res.data
				}
			});
			//检测缓存，用户自己的评论
			uni.getStorage({
				key: 'publish_comment_id',
				success: (res) => {
					this.publishCommentList = res.data
				}
			});
			


		},
		methods: {

			toPopupShow(item) {
				this.commentPage = 1
				this.popupTitle = item.content
				this.popupShow = true
				this.skuId = item.id
				uni.getStorage({
					key: 'userInfo',
					success: (res) => {
						this.userpic = res.data.userpic;
					}
				});

				//发送请求
				this.getMarketSkuComment(this.skuId, false)
			},

			async getMarketSkuComment(skuId, reachBottomFlag) {

				if (this.commentPage <= this.commentPages || !reachBottomFlag) {
					let form = {
						current: this.commentPage,
						size: 6,
						skuId: skuId
					}
					let result = await this.$u.api.getMarketSkuComment(form)
					this.commentPages = result.pages
					//如果是下滑操作则执行
					if (reachBottomFlag) {
						this.commentList = this.commentList.concat(result.records)

					} else {
						this.commentList = result.records
					}

				}

			},
			hideKeyBoder() {
				this.popupInputValue = ''
				this.keyBorderShow = false
				uni.hideKeyboard()
			},
			setPopupInputValue(emoji) {
				this.popupInputValue = this.popupInputValue + emoji;
			},

			timeAgo(createTime) {
				const currentTime = new Date();
				const createdTime = new Date(createTime);
				const timeDiff = currentTime.getTime() - createdTime.getTime();

				const minutes = Math.floor(timeDiff / (1000 * 60));
				if (minutes < 60) {
					return `${minutes} 分钟前`;
				}

				const hours = Math.floor(minutes / 60);
				if (hours < 24) {
					return `${hours} 小时前`;
				}

				const days = Math.floor(hours / 24);
				if (days < 30) {
					return `${days} 天前`;
				}

				const months = Math.floor(days / 30);
				return `${months} 个月前`;
			},

			async likeClick(item) {
				//防止多次触发
				if (!this.likeClickFlagList.includes(item.id)) {

					//用户首次点击，需要在前端快速调整点赞数量
					item.likeCount += 1

					//储存已经点赞过的评论
					this.likeClickFlagList = this.likeClickFlagList.concat(item.id)
					//存储到缓存中
					uni.setStorage({
						key: 'market_comment_like',
						data: this.likeClickFlagList,
						success: () => {
							console.log(this.likeClickFlagList);
						}
					});

					let form = {
						id: item.id,
						skuId: item.skuId
					}
					await this.$u.api.likeCommentClick(form)
				}

			},

			clickCommentInput() {
				this.keyBorderShow = true

				uni.onKeyboardHeightChange(res => {
					this.commentInputHeight = res.height
				})
			},

			async publishComment() {
				let form = {
					content: this.popupInputValue,
					skuId: this.skuId
				}
				let result = await this.$u.api.marketDetailPublishComment(form)
				//把评论id保存在发布的数组中，并且保存进入缓存
				this.publishCommentList = this.publishCommentList.concat(result)
				uni.setStorage({
					key: "publish_comment_id",
					data: this.publishCommentList,
					success: () => {
						console.log(this.publishCommentList);
					}
				})

				this.popupInputValue = ''
				//重新计算
				this.commentPage = 1
				this.getMarketSkuComment(this.skuId, false)
				this.keyBorderShow = false
			},

			//评论触底事件
			popupLower() {
				this.commentPage++
				this.getMarketSkuComment(this.skuId, true)
			},


		}
	}
</script>

<style scoped lang="scss">
	.popup-input {
		flex-shrink: 0;
		width: 100%;
		position: absolute; // input 所在盒子设置绝对定位
		left: 0;
		bottom: 0; // 默认 0
		z-index: 199;
	}
</style>